<template>
    <div>
      <el-dialog :title="data.titleName" v-model="data.children_page" :close-on-click-modal='false'
       :append-to-body='true' width="1000px">
        <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="110" >




          <el-row>
                    <el-col :span="5">
                      <el-form-item label="IP防火墙：" prop="iptype" label-width="140px">
                        <el-switch
                        v-model="ruleForm.iptype"
                        inline-prompt
                        active-text="ON"
                        inactive-text="OFF"
                        active-value="normal" inactive-value="hidden" active-color="#13ce66"
                        />
                      </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item  prop="iptime">
                    <el-input v-model.trim="ruleForm.iptime"><template #suffix>
                      秒内单IP允许请求
                    </template></el-input> 
          
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="ipyxnum">
                    <el-input v-model.trim="ruleForm.ipyxnum"  > <template #suffix>
                      次 冻结
                    </template></el-input>
                  </el-form-item>
                </el-col>
                  <el-col :span="6">
                  <el-form-item prop="ipdjtime">
                    <el-input v-model.trim="ruleForm.ipdjtime"  ><template #suffix>
                      分钟，0为永久
                    </template></el-input> 
                  </el-form-item>
                </el-col>
          </el-row>


          <el-row>
                    <el-col :span="5">
                      <el-form-item label="注册防火墙：" prop="zctype" label-width="140px">
                        <el-switch
                        v-model="ruleForm.zctype"
                        inline-prompt
                        active-text="ON"
                        inactive-text="OFF"
                        active-value="normal" inactive-value="hidden" active-color="#13ce66"
                        />
                      </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item  prop="zctime">
                    <el-input v-model.trim="ruleForm.zctime"><template #suffix>
                      秒内单IP允许请求
                    </template></el-input> 
          
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="zcyxnum">
                    <el-input v-model.trim="ruleForm.zcyxnum"  > <template #suffix>
                      次 冻结
                    </template></el-input>
                  </el-form-item>
                </el-col>
                  <el-col :span="6">
                  <el-form-item prop="zcdjtime">
                    <el-input v-model.trim="ruleForm.zcdjtime"  ><template #suffix>
                      分钟，0为永久
                    </template></el-input> 
                  </el-form-item>
                </el-col>
          </el-row>

          <el-row>
                    <el-col :span="5">
                      <el-form-item label="登录防火墙：" prop="dltype" label-width="140px">
                        <el-switch
                        v-model="ruleForm.dltype"
                        inline-prompt
                        active-text="ON"
                        inactive-text="OFF"
                        active-value="normal" inactive-value="hidden" active-color="#13ce66"
                        />
                      </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item  prop="dltime">
                    <el-input v-model.trim="ruleForm.dltime"><template #suffix>
                      秒内登录次数超过
                    </template></el-input> 
          
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="dlyxnum">
                    <el-input v-model.trim="ruleForm.dlyxnum"  > <template #suffix>
                      次 冻结
                    </template></el-input>
                  </el-form-item>
                </el-col>
                  <el-col :span="6">
                  <el-form-item prop="dldjtime">
                    <el-input v-model.trim="ruleForm.dldjtime"  ><template #suffix>
                      分钟，0为永久
                    </template></el-input> 
                  </el-form-item>
                </el-col>
          </el-row>

          <el-row>
                    <el-col :span="5">
                      <el-form-item label="动态函数防火墙：" prop="dttype" label-width="140px"> 
                        <el-switch
                        v-model="ruleForm.dttype"
                        inline-prompt
                        active-text="ON"
                        inactive-text="OFF"
                        active-value="normal" inactive-value="hidden" active-color="#13ce66"
                        />
                      </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item  prop="dttime">
                    <el-input v-model.trim="ruleForm.dttime"><template #suffix>
                      秒内调用次数超过
                    </template></el-input> 
          
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="dtyxnum">
                    <el-input v-model.trim="ruleForm.dtyxnum"  > <template #suffix>
                      次 冻结
                    </template></el-input>
                  </el-form-item>
                </el-col>
                  <el-col :span="6">
                  <el-form-item prop="dtdjtime">
                    <el-input v-model.trim="ruleForm.dtdjtime"  ><template #suffix>
                      分钟，0为永久
                    </template></el-input> 
                  </el-form-item>
                </el-col>
          </el-row>

          <el-row>
                    <el-col :span="5">
                      <el-form-item label="大禹之盾防火墙：" prop="dytype" label-width="140px">
                        <el-switch
                        v-model="ruleForm.dytype"
                        inline-prompt
                        active-text="ON"
                        inactive-text="OFF"
                        active-value="normal" inactive-value="hidden" active-color="#13ce66"
                        />
                      </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item  prop="dytime">
                    <el-input v-model.trim="ruleForm.dytime"><template #suffix>
                      秒内调用次数超过
                    </template></el-input> 
          
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="dyyxnum">
                    <el-input v-model.trim="ruleForm.dyyxnum"  > <template #suffix>
                      次 冻结
                    </template></el-input>
                  </el-form-item>
                </el-col>
                  <el-col :span="6">
                  <el-form-item prop="dydjtime">
                    <el-input v-model.trim="ruleForm.dydjtime"  ><template #suffix>
                      分钟，0为永久
                    </template></el-input> 
                  </el-form-item>
                </el-col>
          </el-row>
              
          <el-row>
                    <el-col :span="5">
                      <el-form-item label="地区防火墙：封海外" label-width="140px" prop="dqtype">
                        <el-switch
                        v-model="ruleForm.dqtype"
                        inline-prompt
                        active-text="ON"
                        inactive-text="OFF"
                        active-value="normal" inactive-value="hidden" active-color="#13ce66"
                        />
                      </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item  prop="dqtime">
                    <el-form-item label="HTTP禁代理IP" prop="dqtime">
                      <el-switch v-model="ruleForm.dqtime" inline-prompt active-text="ON" inactive-text="OFF" active-value="normal" inactive-value="hidden" active-color="#13ce66">
            </el-switch>
             
                      </el-form-item>
          
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="白名单：" prop="dqyxnum" style="width:90%;" >
            <el-input v-model.trim="ruleForm.dqyxnum"  /> 
          </el-form-item>
                </el-col>
                  <el-col :span="6">
                    <el-form-item label="黑名单：" prop="dqdjtime" style="width:90%;" >
            <el-input v-model.trim="ruleForm.dqdjtime"  /> 
          </el-form-item>
                </el-col>
          </el-row>


          <el-form-item>
            <el-button @click="data.children_page = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit(ruleFormRef)">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  <script lang="ts" setup>
import UploadImg from "./Upload/Img.vue";
    import {
      firewalldata,
    } from '../../../api/index';
    import {
      ElMessage,
      ElTree
    } from "element-plus";
    // import type { FormInstance } from 'element-plus' 
    import {
      ref,
      reactive,
      nextTick,
      // defineProps,//defineProps声明props;具备完整的类型推断;<script setup>直接可用
      // defineEmits,//defineEmits声明事件;具备完整的类型推断;<script setup>直接可用
      // defineExpose//暴露出去;<script setup>直接可用
    } from 'vue';
import { log } from "console";
// 数据类型
const status = [
  {
    value: '0',
    label: 'IP地址',
  },
  {
    value: '1',
    label: '机器码',
  },
  {
    value: '2',
    label: '账号',
  },
];

    const test1 = ref('')
const test2 = ref('')
// const test1=(v:any)=>{
//   console.log("接收到子组件的值",v)
//   alert(2);
// }
    const ruleFormRef = ref();//表单ref
    //获取tree选中的值
    const treeRef = ref < InstanceType < typeof ElTree >> ();
    const emit = defineEmits(["onItemChange"]);//声明事件(父级页面上添加的 @监听事件)
 
    //数据双向绑定;复杂类型数据=>响应式数据
    const data = reactive({
     
      titleName: '',
      checkAll: false,
      children_page: false,
      isAdd: false,
      systems: [{
        name: '开发1部',
        id: 'water'
      }, {
        name: '市场部',
        id: 'pollution'
      }],
      nowKeys: [] as any[], // 属性需要做类型断言处理 //树-选中数据
      treeDatas: [], //树-总数据
      id: '',
      dataText:'',
    });
    //ts类型断言
    //定义类型
    interface User {
      
        dldjtime:string;
      dltime:string;
      dltype:string;
      dlyxnum:string;
      dqdjtime:string;
      dqtime:string;
      dqtype:string;
      dqyxnum:string;
      dtdjtime:string;
      dttime:string;
      dttype:string;
      dtyxnum:string;
      dydjtime:string;
      dytime:string;
      dyyxnum:string;
      ipdjtime:string;
      iptime:string;
      iptype:string;
      zcdjtime:string;
      zctype:string;
      zcyxnum:string;
      zctime:string;
      ipyxnum:string;
      dytype:string;
     remark:string;
     software:string;
     status:string;
    ip:string;
    addtime:string;
    };
    const ruleForm = reactive({
      dldjtime:'',
      dltime:'',
      dltype:'',
      dlyxnum:'',
      dqdjtime:'',
      dqtime:'',
      dqtype:'',
      dqyxnum:'',
      dtdjtime:'',
      dttime:'',
      dttype:'',
      dtyxnum:'',
      dydjtime:'',
      dytime:'',
      dyyxnum:'',
      ipdjtime:'',
      iptime:'',
      iptype:'',
      zcdjtime:'',
      zctype:'',
      zcyxnum:'',
      zctime:'',
      ipyxnum:'',
      dytype:'',
      remark:'',
      software:'',
      status:'',
      ip:'',
      addtime:'',
    });



    const rules = ref({
      name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 50,
          message: '长度在 1 到 50 个字符',
          trigger: 'blur'
        }
      ],
      
    });
    //父调子的子
    const addItemShow = (now_name: string) => {
      data.titleName = '添加角色';
      data.children_page = true;
      data.isAdd = true;
      ruleForm.addtime = "";
        ruleForm.status = "0";
        ruleForm.ip = "";
        ruleForm.software = "";
        ruleForm.remark = "";
    
        console.log(ruleForm);
        
      nextTick(() => {
      ruleFormRef.value.resetFields();//重置表单
      })
    };
    //父调子的子
    const addItemShow2 = (row: User, now_name: string) => {
      data.titleName = '编辑角色';
      data.children_page = true;
      data.isAdd = false;
      getAllListLink();

    };
        //获取表格列表数据
        const getAllListLink = () => {
        let params = {
			action:'apiaddlist',
        }
			
        firewalldata(params).then(res => {
			console.log(res);
	
            if (res.status == 200) {
         
                  let row = res.data.data;

                    nextTick(() => {
        ruleFormRef.value.resetFields();//重置表单
        ruleForm.dldjtime = row.dldjtime;
        ruleForm.dltime = row.dltime;
        ruleForm.dltype = row.dltype;
        ruleForm.dlyxnum = row.dlyxnum;
        ruleForm.dqdjtime = row.dqdjtime;
        ruleForm.dqtime = row.dqtime;
        ruleForm.dqtype = row.dqtype;
        ruleForm.dqyxnum = row.dqyxnum;
        ruleForm.dtdjtime = row.dtdjtime;
        ruleForm.dttime = row.dttime;
        ruleForm.dttype = row.dttype;
        ruleForm.dtyxnum = row.dtyxnum;
        ruleForm.dydjtime = row.dydjtime;
        ruleForm.dytime = row.dytime;
        ruleForm.dytype = row.dytype;
        ruleForm.dyyxnum = row.dyyxnum;
        ruleForm.ipdjtime = row.ipdjtime;
        ruleForm.iptime = row.iptime;
        ruleForm.iptype = row.iptype;
        ruleForm.ipyxnum = row.ipyxnum;
        ruleForm.zcdjtime = row.zcdjtime;
        ruleForm.zctime = row.zctime;
        ruleForm.zctype = row.zctype;
        ruleForm.zcyxnum = row.zcyxnum;
       
        data.id = row.id;
      })
					// console.log(data.historyData)
					// BASE_API
               
            } else if (res.status !== 200) {
                data.dataText = "暂无数据";
                ElMessage({
                    showClose: true,
                    message: res.statusText,
                    type: 'error',
                })
            }
        })
    };
    //添加/修改   : FormInstance | undefined
    const onSubmit = async (formEl:any) => {
      if (!formEl) return
      formEl.validate((valid:any) => {
        if (valid) {
          if (data.isAdd) { 
            addRoles();
          } else {
            changeRoles();
          }
        } else {
          return false;
        }
      });
    };
// ref的作用是实现响应式， 如果没有ref则不能实现响应式（引用数据类型用reactive）
          // 使用ref包裹的数据，需要通过 .value 的形式访问他的值
    const addRoles = () => { 
      console.log(499);
      let params = {
        action: 'apiadd',
        addtime: ruleForm.addtime,
        ip: ruleForm.ip,
        status: ruleForm.status,
        software: ruleForm.software,
        remark: ruleForm.remark,
       
      }
      // 新增
      firewalldata(params).then(res => {
        console.log(525);
        if (res.status == 200) {
          ElMessage({
            showClose: true,
            message: '操作成功',
            type: 'success',
          })
          data.children_page = false;
          emit("onItemChange");
        } else if (res.status  !== 200) {
          ElMessage.error(res.statusText);
        }
      })
    };
    //修改接口
    const changeRoles = () => {
      
      let params = {
        action: 'apiedit',
        id: data.id,


        dldjtime: ruleForm.dldjtime,
        dltime: ruleForm.dltime,
        dltype: ruleForm.dltype,
        dlyxnum: ruleForm.dlyxnum,
        dqdjtime: ruleForm.dqdjtime,
        dqtime: ruleForm.dqtime,
        dqtype: ruleForm.dqtype,
        dqyxnum: ruleForm.dqyxnum,
        dttime: ruleForm.dtdjtime,
        dtdjtime: ruleForm.dtdjtime,
        dttype: ruleForm.dttype,
        dtyxnum: ruleForm.dtyxnum,
        dydjtime: ruleForm.dydjtime,
        dytime: ruleForm.dytime,
        dytype: ruleForm.dytype,
        dyyxnum: ruleForm.dyyxnum,
        ipdjtime: ruleForm.ipdjtime,
        iptime: ruleForm.iptime,
        iptype: ruleForm.iptype,
        ipyxnum: ruleForm.ipyxnum,
        zcdjtime: ruleForm.zcdjtime,
        zctime: ruleForm.zctime,
        zctype: ruleForm.zctype,
        zcyxnum: ruleForm.zcyxnum,
       
       
        
      }
// 修改
firewalldata(params).then(res => {
        console.log(296);
        console.log(res)
        console.log(res.status)
        if (res.status == 200) {
          ElMessage({
            showClose: true,
            message: '操作成功',
            type: 'success',
          })
          data.children_page = false;
          emit("onItemChange");
        } else if (res.status  !== 200) {
          ElMessage.error(res.statusText);
        }
      })
    };
    defineExpose({
      addItemShow,
      addItemShow2
    }) //将子组件方法暴露出来，让父组件调用
  </script>
  <style scoped>
    .jurisdiction-border {
      width: 500px;
      height: 300px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow: auto;
    }
   
    .jurisdiction-border::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: rgb(241, 241, 241);
      border-radius: 3px;
    }
   
    .jurisdiction-border::-webkit-scrollbar-thumb {
      background-color: rgb(193, 193, 193);
      border-radius: 3px;
    }
   
    .tree-name-leave {
      margin-leave: 5px;
    }
  </style>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>